<template>
	<view class="expert">
		<view class="product">
			<view class="list flex_r_between" v-for="(item,index) in showlist" :key="index"
				@click="active_ids = item.id">
				<view class="left flex_center">
					<view class="image">
						<image v-if="item.goods_image.length" :src="item.goods_image[0]" mode="aspectFill"></image>
					</view>
					<view class="text">
						<view class="hidden">
							{{item.name}}
						</view>
						<text><i>￥</i>388</text>
					</view>
				</view>
				<view class="right">
					<image :src="`/static/public/select${active_ids == item.id ? '_s' : ''}.png`" mode="aspectFill">
					</image>
				</view>
			</view>

			<view class="lookmore" @click="more = true">
				查看全部
			</view>
		</view>

		<view class="content">
			<view class="title">推广模式</view>
			<view class="tab flex_center">
				<view :id="is_cps ? '' : 'select'" @click="is_cps = false">模式一(CPM曝光)</view>
				<view :id="is_cps ? 'select' : ''" @click="is_cps = true">模式二(CPS曝光)</view>
			</view>

			<view class="box">
				<view class="cpm" v-if="!is_cps">
					<view class="inp flex_center">
						<text>出价(元)</text>
						<input type="text" placeholder="建议价格:15元/1000曝光" placeholder-class="input-placeholder" />
					</view>
					<view class="inp flex_center">
						<text>曝光次数</text>
						<input type="text" placeholder="曝光次数" placeholder-class="input-placeholder" />
					</view>
					<view class="text">选择此模式为达人发布作品，作品中带您的产品链接，根据视频千次曝光结算。</view>
					<view class="h16"></view>
					<view class="text">剩余投放次数：0曝光点</view>
					<view class="text">根据当前出价：1000次曝光/20元</view>
				</view>
				<view class="cps" v-else>
					<view class="inp flex_center">
						<text>出价(%)</text>
						<input type="text" placeholder="请输入达人带货抽佣比例" placeholder-class="input-placeholder" />
					</view>
					<view class="inp flex_center">
						<text>投放时间</text>
						<view class="input-box flex_center" @click="open">
							<u-icon name="arrow-right" size="24rpx" color="#131313"></u-icon>
							<view class="mengban"></view>
							<input type="text" disabled placeholder="请选择日期范围" placeholder-class="input-placeholder"
								v-model="time" />
						</view>
					</view>
					<view class="text">例:商品单价为100元，达人抽佣比为10%，通过达人带货出售1单，则达人佣金为10元。</view>
				</view>
			</view>
		</view>

		<view class="btn_box flex_r_between">
			<view class="left">

			</view>
			<view class="right">
				<u-button class="custom-style" shape="circle" text="确认" @click="onSubmit"></u-button>
			</view>
		</view>

		<!-- 日历 -->
		<uni-calendar ref="calendar" :insert="false" :range='true'
			:start-date="`${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`"
			@confirm="confirm" />

		<u-popup :show="more" @close="more = false" :safeAreaInsetBottom="false">
			<view class="more_product">
				<z-paging ref="paging" v-model="list" @query="queryList">
					<view slot="top">
						<view class="nav_bar" style="background-color: rgba(255, 255, 255, 1);">
							<uni-nav-bar color="#333" left-icon="left" title="查看更多" :border='false' :fixed="true"
								background-color="transparent" @clickLeft="more = false"></uni-nav-bar>
						</view>
						<view class="nav_box"></view>
					</view>
					<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
					<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
					<view class="item flex_r_between" v-for="(item,index) in list" :key="index"
						@click="onChoose(index)">
						<view class="left flex_center">
							<view class="image">
								<image v-if="item.goods_image.length" :src="item.goods_image[0]" mode="aspectFill">
								</image>
							</view>
							<view class="text">
								<view class="hidden">
									{{item.name}}
								</view>
								<text><i>￥</i>{{item.goods_price}}</text>
							</view>
						</view>
						<view class="right">
							<image :src="`/static/public/select${active_ids == item.id ? '_s' : ''}.png`"
								mode="aspectFill"></image>
						</view>
					</view>
				</z-paging>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				is_cps: false,

				// 更多商品
				more: false,

				time: '',

				showlist: [],

				active_ids: '',

				// 更多商品
				list: [],
				page: 1,
				total: 0,
			}
		},
		methods: {
			confirm(e) {
				var start = uni.$u.timeFormat(e.range.data[0], 'yy/mm/dd');
				var end = uni.$u.timeFormat(e.range.data[e.range.data.length - 1], 'yy/mm/dd');
				this.time = start + '-' + end;
			},

			open() {
				this.$refs.calendar.open();
			},

			getShowList() {
				this.$get('/store_goods/getStoreGoodsList', {
					page: 1,
					limit: 2,
				}).then(res => {
					this.showlist.push(...res.data.data)
				});
			},

			queryList(pageNo, pageSize) {
				// 此处请求仅为演示，请替换为自己项目中的请求
				this.$get('/store_goods/getStoreGoodsList', {
					page: pageNo,
					limit: pageSize
				}).then(res => {
					// 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
					this.$refs.paging.complete(res.data.data);
				});
			},

			onChoose(index) {
				var flag = false;
				this.active_ids = this.list[index].id;
				this.showlist.forEach(element => {
					if (element.id == this.list[index].id) {
						flag = true;
					}
				});

				if (!flag) {
					this.showlist[0] = this.list[index];
				}

				this.more = false;
			},

			onSubmit() {
				this.$post('/popularize/savePopularize', {
					type: 5,
					active_ids: this.active_ids,
					eredar_share: 1,
					profile: '',
					account: uni.getStorageSync('account') ? uni.getStorageSync('account') : ''
				})
			},
		},

		created() {
			this.getShowList();
		}
	}
</script>

<style lang="less" scoped>
	.expert {
		padding-bottom: 166rpx;
	}

	.product {
		.list {
			padding: 16rpx;
			background: #F8F8F8;
			border-radius: 16rpx;
			margin-bottom: 20rpx;

			.left {
				flex: 1;
				overflow: hidden;

				.image {
					width: 112rpx;
					height: 112rpx;
					background: #D8D8D8;
					border-radius: 16rpx;
					overflow: hidden;
					margin-right: 24rpx;

					image {
						width: 112rpx;
						height: 112rpx;
					}
				}

				.text {
					flex: 1;
					overflow: hidden;

					view {
						font-size: 28rpx;
						color: #131313;
					}

					text {
						i {
							font-size: 24rpx;
							font-style: normal;
						}

						font-size: 32rpx;
						color: #131313;
						font-weight: 600;
					}
				}
			}

			.right {
				margin-left: 40rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.lookmore {
			height: 80rpx;
			background: #F8F8F8;
			border-radius: 16rpx;
			font-size: 24rpx;
			color: #131313;
			line-height: 80rpx;
			text-align: center;
		}
	}

	.content {
		margin-top: 48rpx;

		.title {
			font-weight: 600;
			font-size: 32rpx;
			color: #131313;
			margin-bottom: 16rpx;
		}

		.tab {
			background: #FFF;

			view {
				height: 80rpx;
				flex: 1;
				font-size: 28rpx;
				color: #131313;
				line-height: 80rpx;
				text-align: center;
				border-radius: 16rpx 16rpx 0rpx 0rpx;
			}

			#select {
				background: #F8F8F8;
			}
		}

		.box {
			padding: 26rpx 32rpx;
			background: #F8F8F8;
			border-radius: 0rpx 16rpx 16rpx 16rpx;
		}
	}

	.cpm {
		.inp {
			height: 96rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			border: 2rpx solid #EEEEEE;
			padding: 0 24rpx;
			margin-bottom: 16rpx;

			text {
				font-size: 28rpx;
				color: #131313;
				margin-right: 24rpx;
			}

			input {
				flex: 1;
				font-size: 28rpx;
				color: #333;
				text-align: right;
			}
		}

		.text {
			font-size: 24rpx;
			color: #999999;
			line-height: 36rpx;
		}
	}

	.cps {
		.inp {
			height: 96rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			border: 2rpx solid #EEEEEE;
			padding: 0 24rpx;
			margin-bottom: 16rpx;

			text {
				font-size: 28rpx;
				color: #131313;
				margin-right: 24rpx;
			}

			input {
				flex: 1;
				font-size: 28rpx;
				color: #333;
				text-align: right;
			}

			.input-box {
				flex: 1;
				flex-direction: row-reverse;
				position: relative;

				.mengban {
					position: absolute;
					width: 100%;
					height: 100%;
					opacity: 0;
					z-index: 10;
				}
			}
		}

		.text {
			font-size: 24rpx;
			color: #999999;
			line-height: 36rpx;
		}

	}

	.btn_box {
		height: 166rpx;
		padding: 0 32rpx 60rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		background: #FFF;
		box-shadow: 0rpx -2rpx 16rpx 0rpx rgba(0, 0, 0, 0.05);

		.right {
			.custom-style {
				background: #FD2A53;
				width: 228rpx;
				height: 72rpx;
				color: #FFFFFF;
				font-size: 28rpx;
			}
		}
	}

	.more_product {
		min-height: 100vh;
		background: #FFF;

		.item {
			padding: 16rpx;
			margin: 0 32rpx 20rpx;
			background: #F8F8F8;
			border-radius: 16rpx;

			.left {
				flex: 1;
				overflow: hidden;

				.image {
					width: 112rpx;
					height: 112rpx;
					background: #D8D8D8;
					border-radius: 16rpx;
					overflow: hidden;
					margin-right: 24rpx;

					image {
						width: 112rpx;
						height: 112rpx;
					}
				}

				.text {
					flex: 1;
					overflow: hidden;

					view {
						font-size: 28rpx;
						color: #131313;
					}

					text {
						i {
							font-size: 24rpx;
							font-style: normal;
						}

						font-size: 32rpx;
						color: #131313;
						font-weight: 600;
					}
				}
			}

			.right {
				margin-left: 40rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
</style>